import { useRef } from 'react'
import { Button } from '@/library/gallery/components/Button'
import { DialogShowHandler } from '@/library/gallery/components/Dialog/type'
import Dialog from '@/library/gallery/components/Dialog'

function Imperative(): React.ReactNode {
  const handler = useRef<DialogShowHandler>()

  return (
    <Button
      block
      onClick={() => {
        handler.current = Dialog.show({
          content: 'closeOnAction === false时，自定义关闭弹窗的时机。可以使用handler.current?.close()',
          closeOnAction: false,
          actions: [
            {
              key: 'close',
              text: '关闭',
              onClick: () => {
                handler.current?.close()
              },
            },
          ],
        })

        // handler.current = Dialog.show({
        //   content: '没有你的旅途 没有意义, closeOnAction === true',
        //   closeOnAction: true,
        //   actions: [
        //     {
        //       key: 'close',
        //       text: '关闭',
        //     },
        //   ],
        // })
      }}
    >
      显示对话框
    </Button>
  )
}

export default Imperative
